<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" > 
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title> MAGNETO Admin Skin</title>
			<#include "/commons/gfx.ftl">
			<script type="text/javascript" src="${jsDir}/custom.js"></script>
	</head>
  <body>
	<div id="wrapper">

      <ul id="topbar">
      	<#include "/commons/gfx/topbar.ftl">	
      </ul>
	
      <ul id="navbar">
        <li class="active">
		<a href="dashboard.html"><span class="icon_text dashboard"></span>dashboard</a>
			<ul>
				<li><a class="subbutton white" href="general.html"><span class="icon_text general"></span>general</a></li>
				<li><a class="subbutton white" href="tabs.html"><span class="icon_text tab"></span>tabs</a></li>
				<li><a class="subbutton white" href="typography.html"><span class="icon_text typography"></span>typography</a></li>
				<li class="active"><a class="subbutton white" href="grids.html"><span class="icon_text grids"></span>grids</a></li>
				<li><a class="subbutton white" href="tables.html"><span class="icon_text tables"></span>tables</a></li>
				<li><a class="subbutton white" href="forms.html"><span class="icon_text forms"></span>forms</a></li>
				<li><a class="subbutton white" href="graphs.html"><span class="icon_text graphs"></span>graphs</a></li>
				<li><a class="subbutton white" href="gallery.html"><span class="icon_text gallery"></span>gallery</a></li>
			</ul>
		</li>
        <li><a href="#"><span class="icon_text content"></span>content</a></li>
        <li><a href="#"><span class="icon_text design"></span>design</a></li>
        <li><a href="#"><span class="icon_text pages"></span>pages</a></li>
        <li><a href="#"><span class="icon_text users"></span>users</a></li>
        <li><a href="#"><span class="icon_text media"></span>media</a></li>
        <li><a href="#"><span class="icon_text comment"></span>comment</a></li>
        <li><a href="#"><span class="icon_text stats"></span>stats</a></li>
        <li><a href="#"><span class="icon_text settings"></span>settings</a></li>
      </ul>
	  <div id="subnavbar">
		<form id="search_form" method="post" action="">
			<input type="text" name="search_input" value="Search..." id="search_input" class="fl" />
		</form>
	  </div>
	
	<div id="content">
	
	<div class="column full">
	
		<div class="box">
		<h2 class="box-header">	Grid System - Two columns </h2>
			<div class="box-content">
				<span class="grid width10 fl">9%</span>
				<span class="grid width90 fr">89%</span>
				<div class="clear"></div>
				<span class="grid width20 fl">19%</span>
				<span class="grid width80 fr">79%</span>
				<span class="grid width30 fl">29%</span>
				<span class="grid width70 fr">69%</span>
				<span class="grid width40 fl">39%</span>
				<span class="grid width60 fr">59%</span>
				<span class="grid width50 fl">49%</span>
				<span class="grid width50 fr">49%</span>
				<span class="grid width60 fl">59%</span>
				<span class="grid width40 fr">39%</span>
				<span class="grid width70 fl">69%</span>
				<span class="grid width30 fr">29%</span>
				<span class="grid width80 fl">79%</span>
				<span class="grid width20 fr">19%</span>
				<span class="grid width90 fl">89%</span>
				<span class="grid width10 fr">9%</span>
				<span class="grid width100 fl">100%</span>
				<div class="clear"></div>
			</div>
		</div>
		
		<div class="box">
		<h2 class="box-header">	Grid System - Three columns </h2>
			<div class="box-content">
				<span class="grid three width10 fl">9%</span>
				<span class="grid width80 fl">79%</span>
				<span class="grid width10 fr">9%</span>
				<div class="clear"></div>
				<span class="grid three width20 fl">19%</span>
				<span class="grid width60 fl">59%</span>
				<span class="grid width20 fr">19%</span>
				<span class="grid three width30 fl">29%</span>
				<span class="grid width40 fl">39%</span>
				<span class="grid width30 fr">29%</span>
				<span class="grid three width40 fl">39%</span>
				<span class="grid width20 fl">19%</span>
				<span class="grid width40 fr">39%</span>
				<div class="clear"></div>
			</div>
		</div>
	
	</div>
	
	<div class="clear"></div>
	</div>

</div>

	<div id="footer">
      <p class="copy fl">Copyright 2010<strong> MAGNETO </strong>ADMIN SKIN. All rights reserved.</p>
      <ul class="button language_button white fr">
        <li class="icon_single language fl"></li>
        <li class="flag en fl"></li>
		<li class="flag es fl"></li>
        <li class="flag de fl"></li>
        <li class="flag it fl"></li>
        <li class="clear"></li>
      </ul>
	  
	  <ul class="skinner fr">
		<li class="fl"><a href="#" rel="style_blue" class="styleswitch skin skin_blue fl"></a></li>
		<li class="fl"><a href="#" rel="style_green" class="styleswitch skin skin_green fl"></a></li>
		<li class="fl"><a href="#" rel="style_red" class="styleswitch skin skin_red fl"></a></li>
		<li class="fl"><a href="#" rel="style_purple" class="styleswitch skin skin_purple fl"></a></li>
		<li class="clear"></li>
	 </ul>
    </div>
</body>
</html>